<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 带语境色彩的面板</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可-->
<div class="panel panel-default">
	<!--使用 .panel-heading class 可以很简单地向面板添加标题容器。-->
	<div class="panel-heading">
		面板标题
	</div>
	<div class="panel-body">
		这是一个基本的面板
	</div>
	<!--class .panel-footer 的 <div> ,在面板中添加脚注.面版脚注不会从带语境色彩的面板中继承颜色和边框，因为它不是前景中的内容。-->
	<div class="panel-footer">面板脚注</div>
</div>
<!--带语境色彩的面板-->
<div class="panel panel-primary">
	<div class="panel-heading">
		<!--使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。-->
		<h3 class="panel-title">面板标题</h3>
	</div>
	<div class="panel-body">
		这是一个基本的面板
	</div>
</div>
<div class="panel panel-success">
	<div class="panel-heading">
		<h3 class="panel-title">面板标题</h3>
	</div>
	<div class="panel-body">
		这是一个基本的面板
	</div>
</div>
<div class="panel panel-info">
	<div class="panel-heading">
		<h3 class="panel-title">面板标题</h3>
	</div>
	<div class="panel-body">
		这是一个基本的面板
	</div>
</div>
<div class="panel panel-warning">
	<div class="panel-heading">
		<h3 class="panel-title">面板标题</h3>
	</div>
	<div class="panel-body">
		这是一个基本的面板
	</div>
</div>
<div class="panel panel-danger">
	<div class="panel-heading">
		<h3 class="panel-title">面板标题</h3>
	</div>
	<div class="panel-body">
		这是一个基本的面板
	</div>
</div><br />

<!--带表格的面板-->
<!--<div> 包含 .panel-body，则向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的 <div>，则组件会无中断地从面板头部移动到表格。-->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个带表格的面板
    </div>
    <!--带列表组的面板-->
    <p>带列表组的面板</p>
     <ul class="list-group">
        <li class="list-group-item">免费域名注册</li>
        <li class="list-group-item">免费 Window 空间托管</li>
        <li class="list-group-item">图像的数量</li>
        <li class="list-group-item">24*7 支持</li>
        <li class="list-group-item">每年更新成本</li>
    </ul>
</div>
<!--带表格的面板-->
<div class="panel panel-default">
    <div class="panel-heading">面板标题</div>
    <table class="table">
        <th>产品</th><th>价格 </th>
        <tr><td>产品 A</td><td>200</td></tr>
        <tr><td>产品 B</td><td>400</td></tr>
    </table>
</div>

</body>
</html>